• Trabajar de manera individual
• Elegir un recurso que le permita la inserción de código JS (blog, site, otros)
• Diseñe un sitio bajo una temática cualquiera.
• Investigar de quince (mínimo) a veinte códigos de JS y aplique a su sitio. Entre los tipos de JS esperados se encuentran: manejo de eventos, validación de formularios, animaciones y efectos visuales, entre otros.
///////////////////////////////////////// 1. Mensaje emergente, por botón
document.getElementById("boton").addEventListener("click", function() {
alert("¡Felicidades has presionado un botón ¡WEEEEEE!!");
});
///////////////////////////////////////// 2. Imagen emergente, por botón
<button onclick="document.getElementById('Bosco').style.display='block'">
Presiona el botón para ver la imagen
</button>
<img id="Bosco" src="https://nestorortiz01upacpa.neocities.org/Area%20de%20trabajo/BOSCO.png" style="display:none;">
///////////////////////////////////////// 3. Botón para cerrar imagen, por botón
<script>
< button onclick="document.getElementById('Bosco').style.display='none'">Ocultar Imagen button>
</script>
///////////////////////////////////////// 4. X y Cero el juego, por botones
///////////////////////////////////////// 5. Botón para ingresar a un link (del código), por botón
<script> function abrirEnlace() { window.open('https://docs.google.com/document/d/1aXj1t4cg17GHEkQn_abuqeQDtKoXPY4Q-lx0ppvf0Zg/edit?usp=sharing', '_blank'); } </script> <button onclick="abrirEnlace()">Ir al enlace de Google Docs</button>
///////////////////////////////////////// 6. Cuando el usuario pasa el mouse sobre el cuadro cambiara lo de dentro), el contenido dentro del span cambiará , por botón
<script> function cambiarContenido() { document.getElementById("miDiv").innerHTML = "Eres Feo XD"; } // Función que restaura el contenido original cuando el mouse sale de la zona function restaurarContenido() { document.getElementById("miDiv").innerHTML = "Pasa el mouse aquí porfavor"; } </script> <div onmouseover="cambiarContenido()" onmouseout="restaurarContenido()" style="width: 300px; height: 100px; border: 1px solid black;"> <span id="miDiv"></span> </div>
///////////////////////////////////////// 7. Cambiar el fondo de la pagina, por botón
<script> // Función que cambia el fondo de la página cuando el mouse pasa por la zona function cambiarFondo() { document.body.style.backgroundColor = "Cyan"; // Color de fondo cyan } // Función que restaura el fondo original cuando el mouse sale de la zona function restaurarFondo() { document.body.style.backgroundColor = "Black"; // Color de fondo negro } </script>
///////////////////////////////////////// 8. Presentar un video de youtube, por botón
<script> // Función para insertar el video function insertarVideoDeYouTube(videoID, contenedorID) { var contenedor = document.getElementById(contenedorID); contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoID + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'; } // Llama a la función para insertar el video insertarVideoDeYouTube('VIDEO_ID', 'contenedorDelVideo'); // Reemplaza 'VIDEO_ID' con el ID del video que quieres insertar </script>
Mi ultimo proyecto en el cual estoy trabajando se llama Bosco, un pequeño robot que funciona para acompañar al jugador
¿Que es Zscript y Decorate? el Zscript es el lenguaje de programacion Tipo POO (Programacion Orientada a Objetos), mientras que Decorate es el lenguaje de definicion de objetos para ZDoom Estos dos lenguaje son utilizados para programar clases, actores, inventarios, huds y otras cosas mas para ZDoom
De hecho Bosco esta creado por estos dos lenguajes, en este codigo defino la Clase NNR_FriendMarine, este es el nombre de clase para Bosco:
